<template>
  <div class="main">
    <swiper ref="mySwiper" class="swiper" :options="swiperOptions">
      <swiper-slide
        v-for="(item, index) in swiperList"
        :key="index"
        :style="{ backgroundImage: 'url(' + item.image + ')' }"
      >
        <div class="center">
          <img :src="item.icon" alt="" srcset="" />
          <h1>{{ item.title }}</h1>
          <p class="desc" v-html="item.content"></p>
          <p class="link">
            更多信息请访问：<a :href="item.url" target="_blanck">{{ item.url }}</a>
          </p>
        </div>
      </swiper-slide>
    </swiper>
    <div class="nav-list">
      <div
        class="item"
        v-for="(item, index) in swiperList"
        :key="index"
        @click="swiperClick(index)"
        :class="current == index ? 'active' : ''"
      >
        <img :src="item.icon" alt="" srcset="" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'carrousel',
  data () {
    const that = this
    return {
      current: 0,
      swiperList: [], // 轮播
      swiperOptions: {
        direction: 'vertical',
        mousewheel: true,
        loop: true,
        // effect: 'fade',
        on: {
          slideChange: function () {
            that.current = this.realIndex
          }
        }
      }
    }
  },
  computed: {
    swiper () {
      return this.$refs.mySwiper.$swiper
    }
  },
  mounted () {
    // console.log('Current Swiper instance object', this.swiper)
  },
  created(){
    this.$http.getGoods().then((res) => {
      if (res.data.code === 0) {
        this.swiperList = res.data.data;
      } else {
        this.$message.error("请求失败，请重试！");
      }
    });
  },
  methods: {
    swiperClick (index) {
      this.swiper.slideTo(index + 1, 500, false)
      this.current = index
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  max-width: 1920px;
  max-height: 1080px;
  .nav-list {
    position: absolute;
    top: 200px;
    right: 7.3%;
    z-index: 2;
    .item {
      margin-bottom: 20px;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      overflow: hidden;
      cursor: pointer;
      transition: all 0.2s ease-in-out;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .item.active,
    .item:hover {
      box-shadow: 0 9px 18px 0 rgb(0 0 0 / 15%);
      -ms-transform: scale(1.3);
      transform: scale(1.3);
    }
  }
  .center {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    img {
      width: 120px;
      height: 120px;
    }
    h1 {
      font-size: 36px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #000000;
      margin-top: 40px;
    }
    .desc {
      width: 432px;
      margin-top: 24px;
      font-weight: 400;
      line-height: 28px;
      font-size: 20px;
      font-family: PingFang SC;
      color: #000;
      margin-top: 40px;
    }
    .link {
      margin-top: 16px;
      font-size: 20px;
      font-family: PingFang SC;
      font-weight: 400;
      line-height: 28px;
      a {
        color: #3471ff;
      }
    }
  }
  .swiper {
    height: calc(100vh - 98px);
    min-height: 600px;
    .swiper-slide {
      background-repeat: no-repeat;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: 50%;
    }
  }
}
</style>
